
<template>
    <div v-Load="isLoadingRef" class="home-container" ref="containerRef" @wheel="throttleOfHandleWheel">
		<ul class="carsousel-container"
			:style="{
				'margin-top':marginTopCom
			}"
			
			@transitionend="handleTransitionEnd"
			>
			<li v-for="(item,i) in bannersRef" :key="item.id">
				<CarouselItem :a-carousel="item" :a-current-index='indexRef' :a-item-index="i" ref="carouseItemRef"></CarouselItem>
			</li>
		</ul>
		<div 
			v-show="indexRef >= 1" 
			@click="switchTo(indexRef -1)" 
			class="icon icon-up">
			<Icon :type="FontTypeEnum.Home" />
		</div>

		<div 
			v-show="indexRef < bannersRef.length-1" 
			@click="switchTo(indexRef +1)" 
			class="icon icon-down">
			<Icon :type="FontTypeEnum.Home" />
		</div>
		<ul class="indicator">
			<li
				:class="{
					active: i===indexRef
				}"
				v-for="(item,i) in bannersRef"
				key="item.id"
				@click="switchTo(i)"
			>
			</li>
		</ul>

	</div>
    <div class="test" style="background-color: blue">aaabc</div>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { InterfaceBanner } from '~@/api/apiTypes';
import { getBannersApi } from '~@/api/banner';
import CarouselItem from './CarouselItem.vue';
import Icon from '~@/components/Icon/index.vue';
import { throttle } from '~@/untils/NslUtils';
import { FontTypeEnum } from '~@/components/Icon/types';
import { vLoad } from '~@/directives/loading/loadingDirective';


const bannersRef=ref<InterfaceBanner[]>([]);
const indexRef=ref(0);
const containerRef=ref<HTMLDivElement>();


let containerHeightRef=ref(0);

const isSwithingRef=ref(false);

const carouseItemRef=ref();

const isLoadingRef=ref(true);

onMounted(async ()=>{
	handleResize();
	bannersRef.value = await getBannersApi();
	isLoadingRef.value=false;
	window.addEventListener('resize',handleResize);

	console.log('carouseItemRef :',carouseItemRef);
	
})

onUnmounted(()=>{
	window.removeEventListener('resize',handleResize);
})


const marginTopCom=computed<string>(()=>{
	return -(containerHeightRef.value*indexRef.value)+'px';
});



const switchTo=(toIndex:number)=>{
	indexRef.value=toIndex;
}

const handleResize=()=>{
	containerHeightRef.value=containerRef.value!.offsetHeight;
}

const handleWheel=(e:WheelEventInit)=>{
	const deltaY=e.deltaY?e.deltaY:0;
	// console.log('deltaY',deltaY);
	
	if(isSwithingRef.value){
		// console.log('in handleWheel isSwithingRef.value:',isSwithingRef.value);
		
		return;
	};
	

	if(deltaY <-5 && indexRef.value >0){
		isSwithingRef.value=true;
		indexRef.value--;
	}else if(deltaY>5 && indexRef.value < bannersRef.value.length-1){
		isSwithingRef.value=true;
		indexRef.value++;
	}
};

const throttleOfHandleWheel=throttle(handleWheel,500,true);

const handleTransitionEnd=()=>{
	// console.log('in handleTransitionEnd');
	isSwithingRef.value=false;
}



</script>

<style lang="less" scoped>
.home-container{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	// border: 1px solid red;
	ul{
		margin: 0;
		list-style: none;
		padding: 0;
	}
}
.carsousel-container{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	transition: 500ms;
	li{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		// border: solid 4px blue;
	}
}
.icon{
	
	font-size: 30px;
	@gap:25px;
	color:@gray;
	cursor:pointer;
	transform: translateX(-50%);
	&.icon-up{
		.self-center();
		top:@gap;
		animation: jump-up 2s infinite;
	}
	&.icon-down{
		position: absolute;
		left:50%;
		bottom:@gap;
		height: 40px;
		// top:auto;
		
		animation: jump-down 2s infinite;
	}

	@jump:5px;
	@keyframes jump-up {
		0%{
			transform: translate(-50%,@jump);
		}
		50%{
			transform: translate(-50%,-@jump);
		}
		100%{
			transform: translate(-50%,@jump);
		}
	}
	@keyframes jump-down {
		0%{
			transform: translate(-50%,-@jump);
		}
		50%{
			transform: translate(-50%,@jump);
		}
		100%{
			transform: translate(-50%,-@jump);
		}
	}
}

.indicator{
	.self-center();
	transform: translateY(-50%);
	left: auto;
	right: 20px;
	li{
		width: 7px;
		height: 7px;
		border-radius: 50%;
		cursor: pointer;
		margin-bottom: 10px;
		border: 1px solid #fff;
		box-sizing: border-box;
		&.active{
			background: #fff;
		}
	}
}
</style>
